<template>
  <div>
    <div class="head ">
      <div style="height:100%;" class="w1120 flex-y-center flex-x-sb">
        <div class="left logo" @click="$router.push('/')">
          <img src="@/assets/logo.png" alt="" />
        </div>
        <div class="right flex-y-center font-16">
          <!-- <div class="m-l-20 cspt">CONTACT US</div> -->
          <div
            :style="{ color: page == 'home' && '#024dee' }"
            @click="$router.push('/')"
            class="m-l-20 cspt"
          >
            HOME
          </div>

          <div
            :style="{ color: page == 'detail' && '#024dee' }"
            @click="$router.replace('/middleware')"
            class="m-l-20 cspt"
          >
            CONTAINERS SPEC
          </div>
          <div
            :style="{ color: page == 'ralColor' && '#024dee' }"
            @click="$router.push('/ralColor')"
            class="m-l-20 cspt"
          >
            RAL COLOR
          </div>
          <div
            :style="{ color: page == 'contactUs' && '#024dee' }"
            @click="$router.push('/contactUs')"
            class="m-l-20 cspt"
          >
            CONTACT US
          </div>
          <div
            :style="{ color: page == 'transportation' && '#024dee' }"
            @click="$router.push('/transportation')"
            class="m-l-20 cspt"
          >
          TRANSPORTATION
          </div>
          <!-- <div
          class="iconfont icon-zhongyingwen font-40 font-w-400 m-l-20"
        ></div> -->
        </div>
      </div>
    </div>

    <slot name="default"></slot>

    <div class="page-footer">
      <div class="w1120 flex-y-center">
        <!-- <div class="logo">
          <img class="logo" src="@/assets/logo.png" alt="" />
        </div> -->
<!--        <div class="content font-14">-->
<!--          Fast Lane Transportation inc. Copyright © 2020 All Rights Reserved-->
<!--        </div>-->
<!--        <div class="style font-14">Site design by AllenMae Inc.</div>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    page: {
      type: String,
      default: false,
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.w1120 {
  max-width: 1120px;
  margin: 0 auto;
}
.head {
  position: sticky;
  top: 0;
  z-index: 999;
  height: 60px;
  padding: 0 20px;
  background: #fff;
  box-shadow: 0 1px 1px 1px #f2f2f2;

  .logo {
    flex: 1;
    cursor: pointer;
    img {
      max-height: 40px;
    }

  }
  .right {
    color: #000;
  }
}

.page-footer {
  box-sizing: content-box;
  // height: 60px;
  padding: 35px 20px 30px 10px;
  background: #fff;

  // .logo {
  //   flex: 1;
  //   cursor: pointer;
  //   img {
  //     max-height: 34px;
  //   }
  //   &:hover {
  //     img {
  //       transform: scale(0.8);
  //       transition: all 0.2s linear;
  //     }
  //   }
  // }
  .content {
    flex: 1;
    width: 0;
    color: #395aa0;
  }
  .style {
    color: #395aa0;
  }
}
</style>
